<script setup lang="ts">
import { onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { showNotify } from 'vant'
import { data } from '@/assets/data/user.json'

const route = useRoute()

const id = Number(route.params.id)
const user = data.find((item) => item.id === id)

const count = ref(0)

onUnmounted(() => {
  console.log('Detail组件销毁')
})
</script>

<template>
  <section class="page-container">
    <van-cell-group class="md-2">
      <van-cell size="large" style="padding-top: 16px">
        <template #title>
          <span style="font-size: 24px; padding-left: 16px; line-height: 32px">
            {{ user?.title }}
          </span>
        </template>

        <template #icon>
          <van-image
            width="64px"
            height="64px"
            fit="cover"
            position="center"
            radius="8px"
            :src="user?.icon"
          />
        </template>

        <template #label>
          <div style="padding-left: 16px; line-height: 32px">微信号: {{ user?.etitle }}</div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-space direction="vertical" fill size="8px">
      <van-cell-group>
        <van-cell title="电话号码" value="13812345678" size="large" />
        <van-cell title="标签" value="朋友" size="large" is-link />
      </van-cell-group>

      <van-cell-group>
        <van-field name="stepper" label="步进器">
          <template #input>
            <van-stepper v-model="count" />
          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group>
        <van-cell icon="message-o" size="large" @click="showNotify('点击了发消息')">
          <template #title>
            <div
              style="
                font-size: 18px;
                line-height: 24px;
                text-align: center;
                width: 100%;
                color: #1989fa;
              "
            >
              <van-icon name="chat" />
              发消息
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-space>
  </section>
</template>

<style scoped></style>
